<!DOCTYPE html>
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_current_language_bidi as LANGUAGE_BIDI %}
<html>
  <head>
    <title>CSSJanus</title>
    <style type="text/css" media="screen, projection">
    {% if LANGUAGE_BIDI %}
      @import "/do?file=http://www.google.com/css/goog.css";
      @import "/do?file=http://www.google.com/css/gooey.css";
      @import "/do?file=http://{{ host }}/files/cssjanus.css";
    {% else %}
      @import "http://www.google.com/css/goog.css";
      @import "http://www.google.com/css/gooey.css";
      @import "files/cssjanus.css";
    {% endif %}
    </style>
  </head>
  <body dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}">
    <div class="g-doc-1024">
      <div class="g-section">
        <h1>
          <a href="/">
            <img
              src="files/cssjanus{% if LANGUAGE_BIDI %}_rtl{% endif %}.png"
              alt="CSSJanus"
            >
          </a>
        </h1>
      </div>

      <div class="g-section">
        <div id="cssj-lang">
          <form action="/i18n/setlang/" method="post">
            <input name="next" type="hidden" value="/">
            <select name="language">
              {% for lang in LANGUAGES %}
              <option
                value="{{ lang.0 }}"
                {% ifequal LANGUAGE_CODE lang.0 %}
                selected="selected"
                {% endifequal %}
                >{{ lang.1 }}</option>
              {% endfor %}
            </select>
            <input type="submit" value="{% trans "Change Language" %}">
          </form>
        </div>

        <h2>CSSJanus {% trans "Left-to-Right-to-Left-ifyer" %}</h2>

        <p>
          {% trans "This webapp uses cssjanus.py to convert LTR(left to right) properties and values in a CSS file to RTL counterparts and vice-versa." %}
        </p>
        <ul>
          <li>
            <a href="http://code.google.com/p/cssjanus/">Google Code Homepage</a>
          </li>
          <li>
            <a href="http://code.google.com/p/cssjanus/source/browse/trunk/README">README</a>
          </li>
          <li>
            {% trans "Author:" %} <a href="mailto:elsigh@google.com">elsigh@google.com</a> Lindsey Simon
          </li>
        </ul>
      </div>

      {% if message %}
      <h3 id="cssj-msg">
        {{ message }}
      </h3>
      {% endif %}

      <div class="g-section cssj-tpl-50-50">
        <div class="cssj-unit cssj-first">
          <form action="/" method="post">
            <div id="cssj-csstext">
              <label for="csstext">
                {% trans "Paste or Type CSS:" %}
              </label>
              <textarea id="csstext" name="csstext" rows="8" cols="60" >{% if csstext %}{{ csstext }}{% endif %}</textarea>
            </div>

            <div>
              <label for="cssuri">
               {% trans "OR use an URI to a CSS file:" %}
              </label>
              <input id="cssuri" name="cssuri" type="text" size="55" value="{% if cssuri %}{{ cssuri }}{% endif %}" dir="ltr">
            </div>

            <fieldset>
              <legend>{% trans "Flags" %}</legend>

              <div>
                <label for="swap_ltr_rtl_in_url">
                  <input id="swap_ltr_rtl_in_url" name="swap_ltr_rtl_in_url" type="checkbox" {% if swap_ltr_rtl_in_url %}checked="checked"{% endif %}> --swap_ltr_rtl_in_url
                </label>
              </div>

              <div>
                <label for="swap_left_right_in_url">
                  <input id="swap_left_right_in_url" name="swap_left_right_in_url" type="checkbox" {% if swap_left_right_in_url %}checked="checked"{% endif %}> --swap_left_right_in_url
                </label>
              </div>
            </fieldset>

            <div class="cssj-submit">
              <input id="cssj-submit" type="submit" value="{% trans "Run CSSJanus!" %}">
              <input type="reset" value="{% trans "Reset" %}">
            </div>
          </form>
        </div>

        <div class="cssj-unit">
          <form id="results">
            <div>
              <label for="cssresults">{% trans "Result CSS:" %}</label>
              {% if result %}
              <textarea id="cssresults" rows="25" cols="60">{{ result }}</textarea>
              {% else %}
              <em>{% trans "Results will appear here..." %}</em>
              {% endif %}
            </div>
          </form>
        </div>
      </div>


      <p id="cssj-altuse">
        {% trans "You could also embed this webapp directly in your markup with your publicly accessible CSS files like so:" %}
      </p>
      <pre>
&lt;style&gt;
  @import "/do?file=www.yoursite.com/yourcss.css";
&lt;/style&gt;</pre>
    </div>


      <img
        src="http://code.google.com/appengine/images/appengine-silver-120x30.gif"
        alt="Powered by Google App Engine" width="120" height="30"
        id="poweredby">
    <script type="text/javascript">
      var exampleText = '.classname-should-not-change-ltr-left-rtl-right {\r' +
                        '  padding: 1px 2px 3px 4px;\r' +
                        '  margin-right: 3em;\r' +
                        '  background-position: 5% 80%;\r' +
                        '  background: url(testme-bright-cleft-left-ltr.gif);' +
                        ' /* try me with flags */\r' +
                        '  cursor: ne-resize;\r' +
                        '}\r' +
                        '/* @noflip */\r'+
                        '.dontchangeme { float:left }\r' +
                        '.changeme { float:left }';
      var el = document.createElement('span');
      el.id = 'cssj-example';
      el.innerHTML = '{% trans "Try this example CSS!" %}';
      el.onclick = function() {
        document.getElementById('csstext').value = exampleText;
      };
      document.getElementById('cssj-csstext').appendChild(el);

      // Google Analytics
      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
      </script>
      <script type="text/javascript">
      var pageTracker = _gat._getTracker("UA-3726155-2");
      pageTracker._initData();
      pageTracker._trackPageview();
    </script>

  </body>
</html>
